<template>
  <view class="bg-white">
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="tabClick"></u-tabs>
    <view class="flex justify-between align-center u-p-x-30" style="height:140rpx; width:100%;" v-for="item,index in rankingList" :key="index">
      <view class="flex align-center">
				<image class="u-m-r-30" v-if="index<=2" :src="`/static/mine/ranking-${index+1}.png`" style="width: 50rpx;height: 50rpx; " mode=""></image>
        <view class="font-weight-bold font-34 u-m-r-30 text-center" style="color:#666666; width:50rpx" v-else>{{ index+1 }}</view>
        <image class="u-m-r-20" :src="item.user_info.avatar" style="width: 100rpx;height: 100rpx; border-radius: 50%;" mode=""></image>
        <view class="flex flex-column font-weight-bold">
          <view class="font-28">{{ item.user_info.nickname }}</view>
          <view class="font-24">{{ item.user_info.mobile }}</view>
        </view>
      </view>
      <view class="font-30 font-weight-bold" style="color:#F23A3A"><view v-if="current==1" class="font-24" style="display:inline-block;">￥</view>{{ current==1 ? item.team_total_amount : '已经推荐'+item.recommend_vip_num+'名用户' }}</view>
    </view>
  </view>
</template>

<script>
	import { MineCenterApi } from '@/api/serves.js'
export default {
  data() {
    return {
      list: [{
          name: '直推VIP人数前10',
        }, {
          name: '业绩销售前10',
      }],
      current: 0,
      rankingList:[]
    };
  },
  mounted() {
    this.getRankingList()
  },
  methods: {
    tabClick(index) {
        console.log('一级菜单的点击', index);
        // 记录切换前滚动条的位置
        if(this.current == index) return
        this.current = index                    
        this.getRankingList()
      },
    getRankingList(){           
      let API = this.current==0 ? 'rankingVip' : 'rankingSale'
      MineCenterApi[API]().then(res=>{
        this.rankingList  = res.data
      })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>